<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>首页推荐品牌列表</title>
    <#include "/common/vue_resource.ftl">
</head>
<body>
<div id="app" v-cloak>
    <div class="app-container">
        <div class="layui-row app-header">
            <div class="layui-col-md3">
                <button type="button" class="layui-btn layui-btn-sm" @click="add">选择品牌</button>
            </div>
            <div class="layui-col-md9 text-right">
                <input type="text" v-model="params.name" placeholder="品牌名称" class="layui-input">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary search-button" @click="seachData">
                    查询
                </button>
            </div>
        </div>
        <div class="app-list">
            <div class="layui-row">
                <div class="layui-col-md9">
                    <div class="app-table-num"><span class="num">首页推荐品牌列表(共 {{total}} 条)</span></div>
                </div>
                <div class="layui-col-md3 text-right">
                    <span class="prev" @click="loadPrev">上一页</span>
                    <span class="next" @click="loadNext">下一页</span>
                </div>
            </div>
            <table class="layui-table" lay-even lay-skin="nob" lay-size1="sm">
                <thead>
                <tr>
                    <th style="width:20px;">#</th>
                    <th>品牌名称</th>
                    <th>是否推荐</th>
                    <th>排序</th>
                    <th>状态</th>
                    <th style="width:215px;">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in rows">
                    <td>{{20 * (params.page - 1) + 1 + index}}</td>
                    <td>{{item.brandName}}</td>
                    <td>
                        <el-switch
                                v-model="item.recommendStatus"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="1"
                                :inactive-value="0"
                                @change="updateStatus(item.recommendStatus, item.id)">
                        </el-switch>
                    </td>
                    <td>{{item.sort}}</td>
                    <td v-if="item.recommendStatus == 1">推荐中</td>
                    <td v-if="item.recommendStatus == 0">未推荐</td>
                    <td class="more-parent">
                        <div class="ui-operating" @click="openSortDialog(index)">设置排序</div>
                        <div class="ui-split"></div>
                        <div class="ui-operating" @click="remove(index)">删除</div>
                    </td>
                </tr>
                <tr v-if="rows.length <= 0">
                    <td colspan="8" class="text-center">没有更多数据了...</td>
                </tr>
                </tbody>
            </table>
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="app-table-num"><span class="num">共 {{total}} 条</span></div>
                </div>
                <div class="layui-col-md6 text-right">
                    <span class="prev" @click="loadPrev">上一页</span>
                    <span class="next" @click="loadNext">下一页</span>
                </div>
            </div>
        </div>

        <el-dialog
                title="设置排序"
                :visible.sync="sortDialog"
                width="30%">
            排序:<el-input v-model="smsHomeBrand.sort" placeholder="排序"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="sortDialog = false">取 消</el-button>
                <el-button type="primary" @click="updateSort()">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            params: {
                name: '',
                page: 1,
            },
            rows: [],
            total: 0,
            sortDialog: false,
            smsHomeBrand: {id: '', sort: 0}
        },
        mounted: function () {
            this.loadData();
        },
        methods: {
            seachData: function () {
                this.params.page = 1;
                this.$nextTick(function () {
                    this.loadData();
                });
            },
            loadData: function () {
                var that = this;
                $.http.post("${params.contextPath}/web/smsHomeBrand/list.json", this.params).then(function (data) {
                    if (!data.success) {
                        $.message(data.message);
                        return;
                    }
                    that.rows = data.rows;
                    that.total = data.total;
                });
            },
            loadNext: function () {
                if (this.rows.length < 20 && this.rows.length > 0) {
                    return;
                }
                this.params.page = this.params.page + 1;
                this.loadData();
            },
            loadPrev: function () {
                if (this.params.page <= 1) {
                    return;
                }
                this.params.page = this.params.page - 1;
                this.loadData();
            },
            add: function () {
                this.showTypes = false;
                var url = "${params.contextPath!}/view/business/smsHomeBrand/smsHomeBrand_edit.htm";
                DialogManager.open({url: url, width: '650px', height: '100%', title: '添加首页推荐品牌'});
            },
            modify: function (index) {
                var row = this.rows[index];
                var url = "${params.contextPath!}/view/business/smsHomeBrand/smsHomeBrand_edit.htm?id=" + row.id;
                DialogManager.open({url: url, width: '650px', height: '100%', title: '编辑首页推荐品牌表'});
            },
            remove: function (index) {//删除
                var that = this;
                this.$confirm('是否删除【'+ that.rows[index].brandName +'】品牌?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.http.post("${params.contextPath}/web/smsCoupon/delete.json", {ids: this.rows[index].id}).then(function (data) {
                        if (!data.success) {
                            return;
                        }
                        that.loadData();
                    });
                }).catch(() => {

                });

            },
            updateStatus: function (status, id) {
                debugger
                var that = this;
                var smsHomeBrand = {id: id, recommendStatus: status};
                $.http.post("${params.contextPath}/web/smsHomeBrand/modify.json", smsHomeBrand).then(function (data) {
                    if (!data.success) {
                        $.message(data.message);
                        return;
                    }
                    that.loadData();
                });
            },
            openSortDialog: function (index) {
                var that = this;
                that.sortDialog = true;
                $.http.post("${params.contextPath}/web/smsHomeBrand/query.json", {id: this.rows[index].id}).then(function (data) {
                    if (!data.success) {
                        return;
                    }
                    that.smsHomeBrand = data.data;
                });
            },
            updateSort: function () {
                var that = this;
                $.http.post("${params.contextPath}/web/smsHomeBrand/modify.json", this.smsHomeBrand).then(function (data) {
                    if (!data.success) {
                        $.message(data.message);
                        return;
                    }
                    that.sortDialog = false;
                    that.loadData();
                });
            }
        }
    });
</script>
</body>

</html>
